<template>
  <div>
    <el-container>
      <!-- menu -->
      <el-aside width="200px"
        ><h3
          style="
            text-align: center;
            height: 60px;
            line-height: 60px;
            color: #fff;
          "
        >
          <i class="el-icon-s-home"></i>
          图书管理系统
        </h3>
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#303133"
          text-color="#fff"
        >
          <router-link to="/index/home" class="deldefault"
            ><el-menu-item index="1">
              <i class="el-icon-document-copy"></i>
              <span slot="title">首页</span>
            </el-menu-item></router-link
          >
          <router-link to="/index/bookstype" class="deldefault"
            ><el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">分类管理</span>
            </el-menu-item></router-link
          >
          <router-link to="/index/books" class="deldefault"
            ><el-menu-item index="3">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">图书管理</span>
            </el-menu-item></router-link
          >
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="4-1"
                @click="$router.push('/index/user/checkpwd')"
              >
                <i class="el-icon-lock"></i>
                <span>修改密码</span></el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu></el-aside
      >
      <el-container>
        <!-- header -->
        <el-header>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in breadList"
              :key="index"
              :to="{ path: item.path }"
              ><span style="color: #fff">{{
                item.meta.title
              }}</span></el-breadcrumb-item
            >
          </el-breadcrumb>
          <div class="helloBox">
            <span
              class="el-icon-user-solid"
              style="font-size: 25px; font-weight: 700"
            ></span>
            <span>{{ $store.state.username }}</span>
            <span
              class="el-icon-switch-button"
              style="font-size: 25px; font-weight: 700; margin-left: 20px"
              @click="quit"
            ></span>
          </div>
        </el-header>
        <!-- main -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [],
    };
  },
  methods: {
    quit() {
      this.$confirm("你确认要退出吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // sessionStorage.removeItem("token");
          this.$store.commit("delToken");
          this.$store.commit("delUser");
          this.$router.replace("/login");
        })
        .catch(() => {});
    },
    isHome(route) {
      return route.name === "home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      // 如果不是首页
      if (!this.isHome(matched[0])) {
        // matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
        matched = [].concat(matched);
      }
      this.breadList = matched;
    },
  },
  created() {
    this.getBreadcrumb();
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  color: white;
  background-color: #303133;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: #303133;
  height: 662px;
}

.el-main {
  background-color: #e9eef3;
}

.deldefault {
  text-decoration: none;
}
.active {
  background-color: #ecf5ff !important;
  color: pink !important;
}
</style>